<template>
  <div class="app-container">
    <!-- table -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="id"><span>{{ props.row.id }}</span></el-form-item>
            <el-form-item label="名字"><span>{{ props.row.originName }}</span></el-form-item>
            <el-form-item label="说明"><span>{{ props.row.comment }}</span></el-form-item>
            <el-form-item label="作者姓名"><span>{{ props.row.authorName }}</span></el-form-item>
            <el-form-item label="作者UID"><span>{{ props.row.authorUID }}</span></el-form-item>
            <!-- <el-form-item label="点赞数"><span>{{ props.row.love }}</span></el-form-item> -->
            <!-- <el-form-item label="龙骨动画名字"><span>{{ props.row.dragonBonesName }}</span></el-form-item> -->
            <el-form-item label="拼图规格大小"><span>{{ props.row.jigsawSizeId }}</span></el-form-item>
            <!-- <el-form-item label="listId"><span>{{ props.row.jigsawListId }}</span></el-form-item> -->
            <!-- <el-form-item label="indexId"><span>{{ props.row.listIndexId }}</span></el-form-item> -->
            <el-form-item label="是否旋转"><span>{{ props.row.isRotate }}</span></el-form-item>
            <!-- <el-form-item label="是否展示"><span>{{ props.row.isShow }}</span></el-form-item> -->
            <el-form-item label="固定所需数量"><span>{{ props.row.fixedNum }}</span></el-form-item>
            <!-- <el-form-item label="startNum"><span>{{ props.row.startNum }}</span></el-form-item> -->
            <el-form-item label="四叶草数"><span>{{ props.row.goldNum }}</span></el-form-item>
            <el-form-item label="拼图开始介绍语"><span>{{ props.row.miniIntro }}</span></el-form-item>
            <el-form-item label="水滴数"><span>{{ props.row.water }}</span></el-form-item>
            <el-form-item label="音乐名"><span>{{ props.row.musicName }}</span></el-form-item>
            <el-form-item label="分享图片名字"><span>{{ props.row.shareImgName }}</span></el-form-item>
            <el-form-item label="animateFullScreen"><span>{{ props.row.animateFullScreen }}</span></el-form-item>
            <!-- <el-form-item label="createTime"><span>{{ props.row.createTime }}</span></el-form-item> -->
            <!-- <el-form-item label="animate"><span>{{ props.row.animate }}</span></el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column sortable prop="id" label="id" width="60"/>
      <el-table-column sortable prop="originName" label="名字" width="90"/>
      <el-table-column sortable prop="comment" label="说明" width="90"/>
      <el-table-column sortable prop="authorName" label="作者姓名" width="110"/>
      <el-table-column sortable prop="authorUID" label="作者UID" width="100"/>
      <el-table-column sortable prop="love" label="点赞数" width="100"/>
      <!-- <el-table-column sortable prop="dragonBonesName" label="dragonBonesName" width="100"/> -->
      <el-table-column sortable prop="jigsawSizeId" label="拼图规格大小" width="90"/>
      <!-- <el-table-column sortable prop="jigsawListId" label="jigsawListId" width="100"/> -->
      <!-- <el-table-column sortable prop="listIndexId" label="indexId" width="100"/> -->
      <!-- <el-table-column sortable prop="isRotate" label="是否可旋转" width="100"/> -->
      <!-- <el-table-column sortable prop="isShowStr" label="是否显示" width="110"/> -->
      <!-- <el-table-column sortable prop="fixedNum" label="fixedNum" width="100"/> -->
      <!-- <el-table-column sortable prop="startNum" label="startNum" width="100"/> -->
      <el-table-column sortable prop="goldNum" label="四叶草数" width="110"/>
      <!-- <el-table-column sortable prop="miniIntro" label="拼图开始介绍语" width="100"/> -->
      <el-table-column sortable prop="water" label="水滴数" width="90"/>
      <el-table-column sortable prop="musicName" label="音乐" width="80"/>
      <!-- <el-table-column sortable prop="shareImgName" label="shareImgName" width="100"/> -->
      <!-- <el-table-column sortable prop="animateFullScreen" label="animateFullScreen" width="100"/> -->
      <!-- <el-table-column sortable prop="createTime" label="createTime" width="100"/> -->
      <!-- <el-table-column sortable prop="animate" label="animate" width="100"/> -->
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showItem(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="delItems(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="查看图片" width="150">
        <template slot-scope="scope">
          <el-popover trigger="click" >
            <img :src="scope.row.mini_url" alt="" style="width: auto">
            <el-button slot="reference" size="small">查看图片</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单 -->
    <el-dialog :visible.sync="formVisible" title="修改图片信息">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="id"><el-col :span="20"><el-input v-model="form.id" disabled/></el-col></el-form-item>
        <el-form-item label="图片名字"><el-col :span="20"><el-input v-model="form.originName"/></el-col></el-form-item>
        <!-- <el-form-item label="图片说明"><el-col :span="20"><el-input v-model="form.comment" type="textarea"/></el-col></el-form-item> -->
        <el-form-item label="作者姓名"><el-col :span="20"><el-input v-model="form.authorName"/></el-col></el-form-item>
        <el-form-item label="作者UID"><el-col :span="20"><el-input v-model="form.authorUID"/></el-col></el-form-item>
        <!-- <el-form-item label="是否上线"><el-col :span="20"><el-switch v-model="form.online" disabled/></el-col></el-form-item> -->
        <!-- <el-form-item label="点赞数"><el-col :span="20"><el-input v-model="form.love"/></el-col></el-form-item> -->
        <!-- <el-form-item label="龙骨动画名字"><el-col :span="20"><el-input v-model="form.dragonBonesName"/></el-col></el-form-item> -->
        <el-form-item label="拼图规格大小"><el-col :span="20">
          <el-select v-model="form.jigsawSizeId" placeholder="请选择" @change="changeSizeId">
            <el-option v-for="item in sizeIdOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-col></el-form-item>
        <!-- <el-form-item label="listId"><el-col :span="20"><el-input v-model="form.jigsawListId"/></el-col></el-form-item> -->
        <!-- <el-form-item label="indexId"><el-col :span="20"><el-input v-model="form.listIndexId"/></el-col></el-form-item> -->
        <el-form-item label="是否可旋转"><el-col :span="20"><el-switch v-model="form.isRotate"/></el-col></el-form-item>
        <!-- <el-form-item label="是否展示"><el-col :span="20"><el-switch v-model="form.isShow"/></el-col></el-form-item> -->
        <el-form-item label="固定所需数量"><el-col :span="20"><el-input v-model="form.fixedNum"/></el-col></el-form-item>
        <!-- <el-form-item label="startNum"><el-col :span="20"><el-input v-model="form.startNum"/></el-col></el-form-item> -->
        <el-form-item label="四叶草数"><el-col :span="20"><el-input v-model="form.goldNum"/></el-col></el-form-item>
        <el-form-item label="拼图开始介绍语"><el-col :span="20"><el-input v-model="form.miniIntro"/></el-col></el-form-item>
        <el-form-item label="水滴数"><el-col :span="20"><el-input v-model="form.water"/></el-col></el-form-item>
        <el-form-item label="音乐"><el-col :span="20"><el-input v-model="form.musicName"/></el-col></el-form-item>
        <el-form-item label="分享图片名"><el-col :span="20"><el-input v-model="form.shareImgName"/></el-col></el-form-item>
        <el-form-item label="最终全屏动画名字"><el-col :span="20"><el-input v-model="form.animateFullScreen"/></el-col></el-form-item>
        <el-form-item label="创建时间"><el-col :span="20"><el-input v-model="form.createTime"/></el-col></el-form-item>
        <!-- <el-form-item label="animate"><el-col :span="20"><el-input v-model="form.animate"/></el-col></el-form-item> -->

        <el-form-item>
          <el-col :span="5">
            <el-button type="primary" @click="online" >上线</el-button>
          </el-col>
          <el-col :span="8">
            <p/>
          </el-col>
          <el-col :span="9">
            <el-button type="primary" @click="onSubmit">修改</el-button>
            <el-button @click="formVisible = false">取消</el-button>
          </el-col>
        </el-form-item>
      </el-form>

    </el-dialog>
    <br>
    <!-- 分页 -->
    <el-col :span="15"><p/></el-col>
    <el-col :span="5">
      <el-pagination
        :total="itemTotal"
        :page-size="pageSize"
        background
        class="picture-page"
        layout="prev, pager, next"
        @current-change="pageChange"
      />
    </el-col>

  </div>
</template>

<script>
import { getList, update, online_multi, del_multi } from '@/api/online-pic'
// import { getList, add, update, online_multi, del_multi } from '@/api/online-pic'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      itemTotal: 100,
      nowPage: 1,
      pageSize: 50,

      visible2: false, // 删除提示

      formVisible: false,
      form: {
        'id': 0,
        'originName': '',
        'name': '',
        'comment': '',
        'authorName': '',
        'authorUID': 0,
        'online': false,
        'love': 0,
        'dragonBonesName': '',
        'jigsawSizeId': 0,
        'jigsawListId': 0,
        'listIndexId': 0,
        'isRotate': false,
        'isShow': false,
        'isShowStr': '',
        'fixedNum': 0,
        'startNum': 0,
        'goldNum': 0,
        'miniIntro': '',
        'water': 0,
        'musicName': '',
        'shareImgName': '',
        'animateFullScreen': '',
        'createTime': 0,
        'animate': ''
      },
      formLabelWidth: '120px',

      sizeIdOptions: [
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        }
      ]

    }
  },
  created() {
    this.pageChange(0)
  },
  methods: {
    pageChange(val) {
      this.listLoading = true
      getList({ page: val, rows: this.pageSize }).then(response => {
        this.nowPage = val
        this.listLoading = false
        this.itemTotal = response.data.count
        this.list = response.data.list
        for (let index = 0; index < this.list.length; index++) {
          const element = this.list[index]
          if (element.isShow) {
            this.list[index].isShowStr = '显示'
          } else {
            this.list[index].isShowStr = '不显示'
          }
        }
        console.log(this.itemTotal)
      })
    },
    showItem(id) {
      console.log(id)
      this.syncForm(id)
      this.formVisible = true
    },
    onSubmit() {
      update(this.form).then(response => {
        this.pageChange(0)
        this.syncForm(this.form.id)
        this.formVisible = false
        this.$message({ message: '修改成功', type: 'success' })
      })
    },
    online() {
      online_multi({ ids: this.form.id }).then(response => {
        this.pageChange(0)
        this.formVisible = false
        this.$message({ message: '上线成功', type: 'success' })
      })
    },
    delItems(id) {
      del_multi({ ids: id }).then(response => {
        this.pageChange(0)
        this.$message({ message: '删除成功', type: 'success' })
      })
    },
    changeSizeId() {
      switch (this.form.jigsawSizeId) {
        case '1':
          this.form.goldNum = 2
          this.form.water = 2
          this.form.fixedNum = 6
          break
        case '2':
          this.form.goldNum = 3
          this.form.water = 3
          this.form.fixedNum = 7
          break
        case '3':
          this.form.goldNum = 4
          this.form.water = 4
          this.form.fixedNum = 8
      }
    },

    // ------------------------------------------------------------------------------------------------

    // 可耻的分割线

    // ------------------------------------------------------------------------------------------------

    syncForm(id) {
      for (let index = 0; index < this.list.length; index++) {
        const element = this.list[index]
        if (element.id === id) {
          this.form = element
          break
        }
      }
    }

  }
}
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 190px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>
